<template>
	<view>
		<u-navbar title=" " leftIconColor="#fff" bgColor="transparent" :autoBack="true"></u-navbar>
		<u-loading-page loading-text="加载中..." :loading="loading" bg-color="#fff"></u-loading-page>
		<view class="content" v-if="loading == false">
			<u--image
				:src="detail.avatar"
				width="100%"
				height="180px"
				@click="preBgImg(detail.avatar)"
			></u--image>
			<view class="box">
				<view class="detail">
					<!-- 商家图片 -->
					<scroll-view scroll-x class="m-bottom-15" v-if="!detail.images">
						<view class="image_list">
							<view class="image_item" v-for="(item, index) in detail.images" :key="index">
								<image
									:src="imageUrl + item"
									lazy-load
									width="260rpx"
									mode="aspectFill"
									radius="15rpx"
									height="195rpx"
									@click="preImg(detail.images, index)"
								>
									<view slot="loading" style="font-size: 24rpx;">加载中</view>
								</image>
							</view>
						</view>
					</scroll-view>
					<!-- 商家标题 -->
					<u--text
						:text="
							language == 'zh'
								? detail.shopname
								: detail.shopname_copy
								? detail.shopname_copy
								: detail.shopname
						"
						bold
						size="19"
						lines="2"
						color="#000"
						margin="0 0 10px 0"
					></u--text>
					<view class="name flex">
						<u-rate
							:count="5"
							v-model="detail.score_service"
							active-color="#FFC100"
							readonly
						></u-rate>
						<!-- <text v-for="(item,index) in detail.category" :key="index">{{language=='zh'?item.name:item.name_copy}}</text> -->
						<text>{{ detail.category_name }}</text>
						<text>{{ detail.comment.total }}条评价</text>
						<text class="price">￥{{ detail.avgPrice || 0 }}/人</text>
					</view>
					<!-- 营业时间 -->
					<view class="businessTime">
						<view class="time">
							<u--text
								:text="'营业时间：' + detail.businessTime"
								color="#434343"
								size="15"
							></u--text>
							<u--text
								v-if="detail.reserveNum > 0"
								:text="detail.reserveNum + '位好友预定过'"
								align="right"
								color="#FF9F04"
								size="12"
							></u--text>
						</view>
						<scroll-view scroll-x v-if="detail.service_ids">
							<view class="label">
								<view v-for="(item, index) in detail.service_ids" :key="index" class="label_item">
									{{ language == 'zh' ? item.name : item.name }}
								</view>
							</view>
						</scroll-view>
					</view>
					<!-- 优惠券 -->
					<view class="businessTime" v-if="detail.coupon.data">
						<scroll-view scroll-x>
							<view class="label">
								<view
									class="coupons_css"
									v-for="(item, index) in detail.coupon.data"
									:key="index"
									@click="getCoupon(item, index)"
								>
									<view>￥{{ item.price }}</view>
									<view class="leftdot"></view>
									<view class="rightdot"></view>
								</view>
							</view>
						</scroll-view>
					</view>
					<!-- 店铺地址 -->
					<view class="address m-top-15">
						<view class="address_text">
							<u--text
								lineHeight="24"
								:text="language == 'zh' ? detail.city : detail.city_copy"
								color="#434343"
								size="15"
							/>
							<u-icon name="map" size="25" @click="getMap"></u-icon>
						</view>

						<!-- 						:text="business ? $t('rest.reserveBtn') : $t('rest.forbidden')"
						:disabled="!business" -->
						<u-button
							:text="$t('rest.reserveBtn')"
							@click="goReserve"
							shape="circle"
							:customStyle="btnStyle"
						></u-button>
					</view>
				</view>
				<u-gap height="10" bgColor="#F5F7F9"></u-gap>
				<view class="tab">
					<z-tabs
						@change="e => (current = e)"
						:name-key="language == 'zh' ? 'name' : 'names'"
						:current="current"
						:active-style="activeStyle"
						:list="tabList"
						inactive-color="#818181"
					></z-tabs>
					<view class="tab_content">
						<!-- 菜单 -->
						<view v-show="current == 0">
							<view class="menu_title">
								<view class="flex">
									<view class="line"></view>
									<u--text
										:text="language == 'zh' ? '菜单' : 'تىزىملىك'"
										color="#141414"
										size="15"
										bold
										margin="0 0 0 10px"
									></u--text>
								</view>
								<u-icon
									name="arrow-right"
									labelPos="left"
									:label="'招牌' + detail.goodsNum + '道'"
									labelSize="13px"
									labelColor="#989898"
									color="#989898"
								></u-icon>
							</view>
							<view class="menu_list" v-if="detail.goods">
								<view class="menu_item" v-for="(item, index) in detail.goods" :key="index">
									<view class="item_image">
										<image
											:src="item.image"
											lazy-load
											mode="heightFix"
											@click="perImgage(item.image)"
										></image>
									</view>
									<u--text
										:text="language == 'zh' ? item.title : item.title_copy"
										lines="1"
										align="center"
										color="#676767"
										size="12"
										margin="5px 0"
									></u--text>
									<view class="flex" style="justify-content: center;">
										<text class="item_price">{{ item.price }}</text>
										<text class="item_original">{{ item.market_price }}</text>
									</view>
								</view>
							</view>
							<view v-else class="empty">
								<u-empty mode="car" text="暂无评价" :icon="imgUrl + 'empty.png'"></u-empty>
							</view>
						</view>
						<!-- 评价 -->
						<view v-show="current == 1">
							<view class="menu_title">
								<view class="flex">
									<view class="line"></view>
									<u--text
										:text="language == 'zh' ? '评价' : 'باھالاش'"
										color="#141414"
										size="15"
										bold
										margin="0 0 0 10px"
									></u--text>
								</view>
								<u-icon
									name="arrow-right"
									@click="goComment"
									labelPos="left"
									:label="detail.comment.total + '条评论'"
									labelSize="13px"
									labelColor="#989898"
									color="#989898"
								></u-icon>
							</view>
							<view class="evaluate_list m-top-20" v-if="detail.comment.data">
								<view
									class="evaluate_item"
									v-for="(item, index) in detail.comment.data"
									:key="index"
								>
									<u-avatar :src="item.avatar" size="43"></u-avatar>
									<view class="item_right">
										<view class="item_title  m-bottom-5">
											<u--text :text="item.username" color="#141414" size="15"></u--text>
											<u--text :text="item.createtime" color="#989898" size="13" align="right" />
										</view>
										<u-rate :count="5" v-model="item.star" readonly active-color="#FFC100" />
										<u--text
											:text="item.content"
											color="#141414"
											size="15"
											margin="15px 0"
											lineHeight="22"
										></u--text>

										<view class="evaluate_image" v-if="item.image">
											{{ item }}
											<image
												v-for="(e, eIndex) in item.image"
												:key="eIndex"
												:src="e"
												lazy-load
												mode="aspectFill"
												style="width: 100%;height: 186rpx;border-radius: 20rpx;"
											></image>
										</view>
									</view>
								</view>
							</view>
							<view v-else class="empty">
								<u-empty mode="car" text="暂无评价" :icon="imgUrl + 'empty.png'"></u-empty>
							</view>
						</view>
						<view v-show="current == 2">
							<storeItem
								:item="item"
								v-for="(item, index) in detail.recommendShop.data"
								:key="index"
								@goDetail="goDetail"
							></storeItem>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			imgUrl: this.$IMAGE_URL,
			imageUrl: this.$DOMAIN_URL,
			btnStyle: {
				background: 'linear-gradient(90deg, #FFC100 0%, #FFC100 100%)',
				height: '88rpx',
				border: 'none',
				fontSize: '17px'
			},
			tabList: [
				{
					name: '推荐菜品',
					names: 'قورۇما'
				},
				{
					name: '餐厅评价',
					names: 'باھالاش'
				},
				{
					name: '商家推荐',
					names: 'سودىگەر'
				}
			],
			current: 0,
			activeStyle: {
				color: '#000',
				fontWeight: 'bold'
			},
			shop_id: 0,
			loading: true,
			detail: {},
			business: ''
		};
	},
	onLoad(e) {
		this.shop_id = e.id;
		this.init();
	},
	computed: {
		language() {
			return this._i18n.locale;
		},
		...mapGetters(['isLogin'])
	},
	methods: {
		perImgage(image) {
			uni.previewImage({
				urls: [image],
				success(res) {
					console.log(res);
				}
			});
		},
		getTimes() {
			var date = new Date(),
				year = date.getFullYear(),
				month = date.getMonth() + 1,
				day = date.getDate(),
				hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours(),
				minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(),
				second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			month >= 1 && month <= 9 ? (month = '0' + month) : '';
			day >= 0 && day <= 9 ? (day = '0' + day) : '';
			var timer = year + '-' + month + '-' + day; //
			return timer;
		},
		isDuringDate(beginDateStr, endDateStr) {
			var curDate = new Date(),
				beginDate = new Date(beginDateStr),
				endDate = new Date(endDateStr);
			if (curDate >= beginDate && curDate <= endDate) {
				return true;
			}
			return false;
		},
		init() {
			this.$http
				.post('wanlshop/shop/shopDetail', {
					shop_id: this.shop_id,
					lat: uni.getStorageSync('latitude') ? uni.getStorageSync('latitude') : 0,
					lng: uni.getStorageSync('longitude') ? uni.getStorageSync('longitude') : 0
				})
				.then(res => {
					if (res.code == 1) {
						this.detail = res.data;

						res.data.images ? (this.detail.images = res.data.images.split(',')) : '';
						let date = this.getTimes();
						let startTime = date + ' ' + this.detail.shop_starttime.slice(0, 5);
						let endTime = date + ' ' + this.detail.shop_endtime.slice(0, 5);
						console.log(startTime);
						console.log(endTime);
						this.business = this.isDuringDate(startTime, endTime); //当前是否营业
						console.log(this.business, 'this.business');
						this.loading = false;
					}
				});
		},
		goComment() {
			uni.$u.route('/pagesA/home/comment', {
				id: this.shop_id
			});
		},
		goReserve() {
			uni.$u.route('/pagesA/home/reserve', {
				id: this.shop_id
			});
		},
		getMap() {
			let that = this;
			uni.openLocation({
				latitude: Number(that.detail.lng),
				longitude: Number(that.detail.lat),
				success: res => {
					console.log(res);
				}
			});
		},
		goDetail(item) {
			if (this.isLogin) {
				uni.$u.route('/pagesA/home/merchantDetail?id=' + item.id);
			} else {
				this.loginShow = true;
			}
		},
		getCoupon(item, index) {
			if (this.isLogin) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				this.$http
					.post('wanlshop/coupon/receive', {
						id: item.id
					})
					.then(res => {
						uni.hideLoading();
						if (res.code == 1) {
							setTimeout(() => {
								this.$refs.uToast.show({
									type: 'default',
									message: '领取成功',
									duration: 1000
								});
								this.detail.coupon.data.splice(index, 1);
							}, 200);
						}
					});
			} else {
				this.loginShow = true;
			}
		},
		// 预览大图片
		preImg(img, index) {
			let imgs = img.map(el => {
				return this.imageUrl + el;
			});
			uni.previewImage({
				urls: imgs,
				current: index,
				success(res) {
					console.log(res);
				}
			});
		},
		preBgImg(img) {
			uni.previewImage({
				urls: [img],
				success(res) {
					console.log(res);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.coupons_css {
	// height: 54rpx;
	position: relative;
	margin-right: 20upx;
	text-align: center;
	line-height: 36upx;
	padding: 12rpx 25rpx;
	border: 1upx solid #ff3d36;
	border-radius: 10upx;
	font-size: 22upx;
	color: #ff3d36;
	margin-right: 20rpx;
}

.leftdot {
	position: absolute;
	top: 22upx;
	left: -2rpx;
	width: 6upx;
	height: 10upx;
	border-top-right-radius: 20upx;
	border-bottom-right-radius: 20upx;
	border: 1upx solid #ff3d36;
	background-color: #fff;
	border-left: 0;
}

.rightdot {
	position: absolute;
	top: 22upx;
	right: -2rpx;
	width: 6upx;
	height: 10upx;
	border-top-left-radius: 20upx;
	border-bottom-left-radius: 20upx;
	border: 1upx solid #ff3d36;
	background-color: #fff;
	border-right: 0;
}

/deep/.z-tabs-bottom-dot {
	background-color: #ffc100 !important;
}

/deep/.z-tabs-item {
	margin-bottom: 6rpx !important;
}

/deep/.u-tag--mini {
	margin-right: 20rpx !important;
}

.content {
	position: relative;
}

.empty {
	height: 600rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.box {
	background-color: #fff;
	border-top-left-radius: 35rpx;
	border-top-right-radius: 35rpx;
	position: absolute;
	left: 0;
	top: 260rpx;
	width: 100%;
	height: 200rpx;

	.detail {
		padding: 40rpx 30rpx;

		.image_list {
			display: flex;
			align-items: center;

			.image_item {
				margin-right: 20rpx;
				width: 260rpx;
				height: 195rpx;
				border-radius: 15rpx;
				flex-shrink: 0;
			}
		}

		.name {
			color: #989898;
			font-size: 24rpx;
			padding-bottom: 30rpx;
			border-bottom: 2rpx solid #eeeeee;
			flex-wrap: wrap;

			text {
				margin: 10rpx;
			}

			.price {
				color: #fc4a31;
			}
		}

		.businessTime {
			padding-bottom: 30rpx;
			margin-top: 30rpx;
			border-bottom: 2rpx solid #eeeeee;

			.time {
				display: grid;
				grid-template-columns: auto 120px;
				grid-column-gap: 20rpx;
			}

			.label {
				display: flex;
				align-items: center;

				.label_item {
					flex-shrink: 0;
					background-color: #f8f8f8;
					padding: 10rpx 30rpx;
					border-radius: 40rpx;
					color: #656565;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 20rpx 20rpx 0 0;
				}
			}
		}

		.address_text {
			display: grid;
			grid-template-columns: auto 60rpx;
			grid-column-gap: 20rpx;
			margin-bottom: 40rpx;
		}
	}

	.line {
		width: 6rpx;
		height: 27rpx;
		background: linear-gradient(180deg, #ffc100 0%, #ffffff 100%);
		border-radius: 4px;
	}

	.tab {
		padding: 20rpx 0 40rpx;

		.tab_content {
			padding: 30rpx;

			.menu_title {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.menu_list {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				grid-column-gap: 20rpx;
				grid-row-gap: 20rpx;
				margin-top: 20rpx;

				.item_image {
					width: 170rpx;
					height: 170rpx;
					border-radius: 10rpx;
					margin: 0 auto;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.item_price {
					color: #1c1c1c;
					font-weight: bold;
					font-size: 32rpx;
					margin-right: 10rpx;
					text-align: center;
				}

				.item_original {
					color: #c8c8c8;
					text-decoration: line-through;
					font-size: 26rpx;
				}
			}

			.evaluate_item {
				display: grid;
				grid-template-columns: 43px auto;
				grid-column-gap: 20rpx;
				margin-bottom: 20rpx;

				.item_right {
					padding-bottom: 20rpx;
					border-bottom: 2rpx solid #eeeeee;

					.item_title {
						display: flex;
						justify-content: space-between;
						padding-left: 10rpx;
					}

					.evaluate_image {
						display: grid;
						grid-template-columns: 1fr 1fr 1fr;
						grid-column-gap: 20rpx;
						grid-row-gap: 20rpx;
					}
				}
			}

			.evaluate_item:last-child {
				margin-bottom: 0;
			}
		}
	}
}

.item {
	background-color: #fff;
	border-radius: 18rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
	display: grid;
	grid-template-columns: 110px auto;
	grid-column-gap: 20rpx;

	.blend {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10rpx;

		.grade {
			width: 72rpx;
			height: 30rpx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			.grade_text {
				position: absolute;
				top: 5rpx;
				right: 12rpx;
				color: #ffc205;
				font-size: 20rpx;
			}
		}
	}

	.sale {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
}

.item:last-child {
	margin-bottom: 0;
}
::v-deep .u-icon text {
	color: #000 !important;
}
</style>
